<template>
  <div class="page">
		<div class="jp-table">
			<div class="table-body">
				<div class="my-navigation" v-if="visible">
					<table style="width: 100%;height: 60px;">
						<tr class="my-tr">
							<td>
								<button class="my-button organizer" @click="organizerClick()">我发起的</button>
							</td>
							<td>
								<button class="my-button receiver" @click="receiverClick()">我收到的</button>
							</td>
							<td>
								<button class="my-button scan" @click="scanClick()">待浏览</button>
							</td>
						</tr>
					</table>
					<!-- <div style="background-color:rgb(0, 0, 0,0.1) ;height: 1px;margin-bottom: 10px;"></div> -->
				</div>
				<div style="height: 90%;" v-if="visible">
					<div class="my-email-list" v-if="dataList.length!=0">
						<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
							<div class="email-car" v-for="item in dataList">
								<emailcar @click="clickCar(item)" :cardData="item"></emailcar>
							</div>
						</div>
					</div>
					<div class="my-email-list" style="display: flex;justify-content: center;" v-if="dataList.length==0"><p style="margin-top: 20px;">没有更多数据</p></div>
					<div class="my-pager">
						<vxe-pager
							background
							size="small"
							:current-page="tablePage.currentPage"
							:page-size="tablePage.pageSize"
							:total="tablePage.total"
							:page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
							:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
							@page-change="currentChangeHandle">
						</vxe-pager>
					</div>
				</div>
				<div class="main-container" v-if="!visible">
					<p class="return" @click="myReturn">&lt;返回</p>
					<table class="email-table">
						<tr class="email-tr" style="border-top: 1px solid #ddd;">  
							<th>反映标题</th>  
							<td><textarea class="textarea-title" readonly v-model="tableData.title"></textarea></td>  
						</tr>
						<tr class="email-tr">  
							<th>发起人ID</th>  
							<td><textarea class="textarea-title" readonly v-model="tableData.id"></textarea></td>  
						</tr>
						<tr >  
							<th>反映内容</th>  
							<td>
								<textarea class="textarea-content" readonly v-model="tableData.content"></textarea>
							</td>  
						</tr>  
						
						<tr>  
							<th>交办意见</th>  
							<td>
								<textarea class="textarea-opinion" v-model="tableData.opinion" v-if="tableData.status=='未处理' && currentStatus=='receive'"></textarea>
								<textarea class="textarea-opinion" readonly v-model="tableData.opinion" v-else></textarea>
							</td>  
						</tr>  
						<tr class="email-tr">  
							<th>办理进程</th>  
							<td><textarea class="textarea-status" readonly v-model="tableData.status"></textarea></td>  
						</tr>  
						<tr class="email-tr">  
							<th>反映时间</th>  
							<td><textarea class="textarea-title" readonly v-model="tableData.reflectDate"></textarea></td>  
						</tr>  
						<tr class="email-tr">
							<th>反馈时间</th>
							<td><textarea class="textarea-title" readonly v-model="tableData.feebackDate"></textarea></td>  
						</tr>  
					</table>
					<div class="email-button" v-if="tableData.status=='未处理' && currentStatus=='receive'">
                        <el-button color="#eebe77" plain @click="reflect">反馈</el-button> 
                    </div>
				</div>
			</div>
    	</div>
		  <!-- 弹窗, 新增 / 修改 -->
    <EmailBoxForm  ref="emailBoxForm" @refreshDataList="refreshList"></EmailBoxForm>
	<loading class="loading" v-if="Loading"></loading>
  </div>
</template>

<script>
  import EmailBoxForm from './EmailBoxForm'
  import emailcar from './emailcar'
  import emailBoxService from '@/api/emailbox/emailBoxService'
  import loading from '@/views/organization/instruction/loading.vue'
  export default {
    data () {
		return {
		  searchVisible: true,
		  searchForm: {
			receiverId:"",
			receiverName:"",
			organizerId:"",
			organizerName:"",
			scan:""
		  },
		  dataList: [],
		  tablePage: {
		    total: 0,
		    currentPage: 1,
		    pageSize: 6,
		    orders: [{ column: "create_time", asc: false }],
		  },
		  tableData:{
			id:"",
			title:"",
			content:"",
			status:"",
			opinion:"",
			reflectDate:"",
			feebackDate:"",
			organizerId:"",
			organizerName:"",
			receiverId:"",
			receiverName:""
            },
			Loading:false,
		  	visible: true,
			currentStatus:"organize"//receive表示当前状态为查看我收到的邮件，organize，scan
		}
    },
    components: {
		EmailBoxForm ,emailcar,loading
    },
    created () {
    },  
	computed: {
		currentUser() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			return userInfo;
		},
	},  
    mounted () {
		this.organizerClick()
		this.elementClick()
		this.initHightLight()
    }, 
    activated () {
		this.refreshList()
		
    },
    methods: {
		// 获取数据列表
		async refreshList () {
			this.Loading=true
		  await emailBoxService.list({
		    'current': this.tablePage.currentPage,
		    'size': this.tablePage.pageSize,
		    'orders': this.tablePage.orders,
		    ...this.searchForm
		  }).then((data) => {
		    this.dataList = data.records
		    this.tablePage.total = data.total
		    this.Loading = false
		  })
		},
		// 当前页
		currentChangeHandle ({ currentPage, pageSize }) {
		  this.tablePage.currentPage = currentPage
		  this.tablePage.pageSize = pageSize
		  this.refreshList()
		},
		//点击邮件
		clickCar(item){
			console.log(item)
			this.visible=false
			this.tableData=item
			let element=document.getElementsByClassName('textarea-status')
			if(this.tableData.status == '未处理'){
				element[0].setAttribute('style','color:#ff4d4d;')
			}
			else if(this.tableData.status=='已反馈'){
				element[0].setAttribute('style','color:#95d475;')
			}
		},
		//点击反馈
		reflect(){
			this.Loading=true
			emailBoxService.save(this.tableData)
			.then((data)=>{
				this.$message.success(data);
				this.Loading=false
				this.refreshList()
			})
			this.visible=true
			
		},
		//点击我发起的
		organizerClick(){
			this.currentStatus='organize'
			this.tablePage.currentPage=1
			this.searchForm.organizerId=this.currentUser.id
			this.searchForm.receiverId=''
			this.searchForm.scan=''
			this.refreshList()
		},
		//点击我收到的
		receiverClick(){
			this.currentStatus='receive'
			this.tablePage.currentPage=1
			this.searchForm.organizerId=''
			this.searchForm.receiverId=this.currentUser.id
			this.searchForm.scan=''
			this.refreshList()
		},
		//点击待浏览
		async scanClick(){
			this.currentStatus='scan'
			this.tablePage.currentPage=1
			this.searchForm.organizerId=''
			this.searchForm.receiverId=this.currentUser.id
			this.searchForm.scan='no'
			await this.refreshList()
			let ids=this.dataList.map((item)=>{
				return item.id
			}).join(',')
			if(ids!=''){
				emailBoxService.IsScan(ids).then((data)=>{
					console.log("已阅读")
				})
			}
			
		},
		//点击返回
		myReturn(){
			this.visible=true
		},
		// 排序
    	sortChangeHandle(obj) {
		  this.tablePage.orders = [];
		  if (obj.order != null) {
		    this.tablePage.orders = [{ column: obj.column.sortBy || this.$utils.toLine(obj.property), asc: obj.order === "asc" }];
		  } else {
		    this.tablePage.orders = [{ column: "create_time", asc: false }];
		  }
		  this.refreshList();
		},
		// 新增
		add () {
		  this.$refs.emailBoxForm.init('add', '')
		},
		// 修改
		edit (id) {
		  id = id || this.$refs.emailBoxTable.getCheckboxRecords().map(item => {
		    return item.id
		  })[0]
		  this.$refs.emailBoxForm.init('edit', id)
		},
		// 查看
		view (id) {
		  this.$refs.emailBoxForm.init('view', id)
		},
		// 删除
		del (id) {
		  let ids = id || this.$refs.emailBoxTable.getCheckboxRecords().map(item => {
		    return item.id
		  }).join(',')
		  this.$confirm(`确定删除所选项吗?`, '提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning'
		  }).then(() => {
		    this.loading = true
		    emailBoxService.delete(ids).then((data) => {
				this.$message.success(data)
				this.refreshList()
				this.loading = false
		    })
		  })
		},
		resetSearch () {
		  this.$refs.searchForm.resetFields()
		  this.refreshList()
		},
		//根据路由设置高亮
		initHightLight () {
			const element=document.querySelector('.organizer')
				element.classList.toggle('active');
				element.setAttribute("style","color: #008CBA;")
		},

		//添加事件
		elementClick() {
			let elementList = document.getElementsByClassName('my-button')
			for (let i = 0; i < elementList.length; i++) {  
				let element = elementList[i]; 
				if (element) {
					// 添加mouseenter事件监听器  
					element.addEventListener('click', function(event) {  
						// 在这里执行你希望在鼠标点击时运行的代码 
						//添加active类
						this.classList.toggle('active');
						element.setAttribute("style","color: #008CBA;")
						for(let j=0;j<elementList.length;j++){
							if(i !=j ){
								elementList[j].classList.remove('active')
								elementList[j].setAttribute("style","color: #515a6e;")
							}
						}
					});  
				}
			}
		}
    }
  }
</script>
<style scoped>
.loading{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	background-color: rgba(255, 255, 255, 0.7);
}
.page{
	padding: 0;
}
.my-email-list{
	height: calc(100% - 40px);
}
.table-body{
	height: 100%;
}
.email-car{
	height: 130px;
	width: calc((100% - 40px) / 2);
	margin: 10px;
}
@media screen and ( max-width:700px){
	.email-car{
		width: 100%;
	}
}
.main-container{
    width: 100%;
    height: 100%;
}
.email-table {  
    width: 100%;
    height: 85%;
    border-collapse: collapse;  
}  
.email-tr{
    height: 50px;
}
.email-table{
	th, td {  
		padding: 8px;  
		text-align: left;  
		border-bottom: 1px solid #ddd;
	}
} 
  
.email-table{
	th { 
		width: 80px;
		background-color: #f2f2f2;  
	}  
} 

.email-table{
	td,th {  
		font-size: 14px;  
	} 
}  
  
/* 可选：增加响应式布局调整 */  
@media (max-width: 700px) {  
    .email-table{
		th, td {  
			display: block;  
			width: 100%;
    	}
	} 
    .email-table{
		td{
        	height: calc(100% - 50px);
    	}
	} 
    .email-table{
		th::after {  
			content: ":";  
		}  
	} 
  
    .email-table{
		th, td::before {  
			float: left;  
			font-weight: bold;  
		} 
	}  
  
    /* 清除浮动 */  
    .email-table{
		th, td {  
			clear: both;  
		}  
	} 
}
.email-button{
    margin: 15px;
    display: flex;
    justify-content: end;
}
textarea{
    width: 100%;
    height: 100%;
    font-size: 14px;
    text-align: left;
    color: #515a6e;
    display: block;
    margin: 0 auto;
    border: none;
    resize: none;  
    line-height: 1.4;
}
.textarea-opinion{
    color: #ff4d4d;
}
.textarea-title,.textarea-status{
    overflow: hidden;
    height: 20px;
}
.return{
	margin: 5px;
	cursor: pointer;
}
.email-button{
    margin-right: 15px;
    display: flex;
    justify-content: end;
}

.my-tr td{
    /* width: calc(100% / 3); */
    text-align: center;
    font-size: 18px;
}

.my-button {
    position: relative;
    padding: 10px 10px;
    background-color: white;
    color: #515a6e;
    border: none;
    cursor: pointer;
}

.my-button::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #008CBA;
    transition: width 0.5s ease;
}

.my-button.active::after {
    width: 100%;
}
</style>
